<template>
  <div>
    <ul class="list-unstyled attach-type-list">
      <li v-for="item in attathData" :key="item.tag" class="attach-type-item">
        <div v-if="showLabel && item.tag" class="attach-tag-label">
          <span class="text-danger" v-if="item.required">*</span>
          {{ item.tag }}{{ item.remark }}
          <span v-if="item.required">
            <i class="fa fa-check text-primary" v-if="item.attachs.length"></i>
            <i class="fa fa-close text-danger" v-else></i>
          </span>
        </div>
        <div class="flex pr-3">
          <slot v-if="item.slot" :name="item.slot" :tag-data="item" />

          <template v-else>
            <slot name="tagAction" :tag-data="item"></slot>
            <ul class="list-unstyled">
              <li v-for="(attach, index) in item.attachs" :key="index" class="attach-item">
                <attach-item :attach-data="attach"></attach-item>
                <slot
                  name="attachAction"
                  :tag-data="item"
                  :attach-data="attach"
                  :index="index"
                ></slot>
              </li>
            </ul>
          </template>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import AttachItem from '@/bank/components/attach/Item'

export default {
  components: {
    AttachItem,
  },
  props: {
    attathData: {
      type: Array,
      default: () => [],
    },
    showLabel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.attach-type-list > .attach-type-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.attach-type-item {
  display: flex;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dotted $gray-200;
}

.attach-tag-label {
  width: 220px;
  padding-top: 0.25rem;
  padding-left: 0.5rem;
}

.attach-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.list-unstyled .attach-item:last-child {
  border-bottom: none;
}
</style>
